/* The 16-column Deco Grid System. 
 * Available in multiple variants, see http://deco.gs
 *
 * Cells are   4.16667%    (=40px)
 * Column margins are 2.08333% (=20px)
 * Total is    6.25%. (=80px) (which makes 12 columns)
 * 
 * If page width is fixed to 960px width:
 * Cell will be equivalent to 40px, left/right margin will be 10px.
 */


div.row {
	float: left;
	width: 100%;
	display: block;
	position: relative;
}
div.cell {
  position: relative;
  float: left;
  left: 100%;
}

/* Width classes. 
   For a given cell width, the calculation is: 
   width = (total cell width) * n - (column margins) 
   In this case: (6.25*n - 2.08333)% */
div.width-1  { width:  4.16667% }
div.width-2  { width: 10.41667% }
div.width-3  { width: 16.66667% }
div.width-4  { width: 22.91667% }
div.width-5  { width: 29.16667% }
div.width-6  { width: 35.41667% }
div.width-7  { width: 41.66667% }
div.width-8  { width: 47.91667% }
div.width-9  { width: 54.16667% }
div.width-10 { width: 60.41667% }
div.width-11 { width: 66.66667% }
div.width-12 { width: 72.91667% }
div.width-13 { width: 79.16667% }
div.width-14 { width: 85.41667% }
div.width-15 { width: 91.66667% }
div.width-16 { width: 97.91667% }

/* Positioning classes, these are subtracting from a rightmost 
   position, which is why they seem the wrong way around */
/* For a given position, the calculation is:
   -100 + (total cell width * n)
   In this case: margin-left: -100 + (6.25*n) */

div.position-0  { margin-left: -100%   }
div.position-1  { margin-left: -93.75% }
div.position-2  { margin-left: -87.5%  }
div.position-3  { margin-left: -81.25% }
div.position-4  { margin-left: -75%    }
div.position-5  { margin-left: -68.75% }
div.position-6  { margin-left: -62.5%  }
div.position-7  { margin-left: -56.25% }
div.position-8  { margin-left: -50%    }
div.position-9  { margin-left: -43.75% }
div.position-10 { margin-left: -37.5%  }
div.position-11 { margin-left: -31.25% }
div.position-12 { margin-left: -25%    }
div.position-13 { margin-left: -18.75% }
div.position-14 { margin-left: -12.5%  }
div.position-15 { margin-left:  -6.25% }

/* End of the core Deco Grid System */

/* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. 
   Not strictly necessary. */
div.width-1\3a 2 { width:    47.91667% } /* .width-1:2 */
div.width-1\3a 4 { width:    22.91667% } /* .width-1:4 */
div.width-3\3a 4 { width:    72.91667% } /* .width-3:4 */
div.position-1\3a 4 {margin-left:    -75% } /* .position-1:4 */
div.position-1\3a 2 {margin-left:    -50% } /* .position-1:2 */
div.position-3\3a 4 {margin-left:    -25% } /* .position-3:4 */


/* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions. 
These do not strictly conform to the grid, but are useful for certain layouts. */
div.width-1\3a 3 { width: 31.25%; } /* .width-1:3 */
div.width-2\3a 3 { width: 64.5%; } /* .width-2:3 */
div.position-1\3a 3 {margin-left: -66.7%;} /* .position-1:3 */
div.position-2\3a 3 {margin-left: -33.4%;} /* .position-2:3 */

/* Full/leftmost are useful synonyms for full width and leftmost positioning */
div.position-leftmost  { margin-left: -100%   }
div.width-full { width: 97.91667% }
